$(document).ready(function() {
	var whoChildren = {};
	var maybeChilcren = {};
	$(".expand").click(function() {
		$("#who-dialog").dialog("open");
	});
	//"./simulated/children.json"
	//http://eyas.scripts.mit.edu/childfeed/simulated/children_json.php
	$("input[name=who]").tokenInput("http://graves.scripts.mit.edu/ChildFeed/src/simulated/children_json.php", {
		theme : "facebook",
		preventDuplicates : true,
		onAdd : function(item) {
			whoChildren[item.id] = item.name;
			var id = "#" + new IDcard(item.name, null, null, null).getID();
			$(id).addClass("selected");
		},
		onDelete : function(item) {
			delete whoChildren[item.id];
			var id = "#" + new IDcard(item.name, null, null, null).getID();
			$(id).removeClass("selected");
		}
	});

	$.getJSON('./utilities/children_model.php', {
		operation : 'get_checkedin'
	}, function(data) {
		checked_in = data;
		for(var i = 0; i < checked_in.length; i++) {
			ci = checked_in[i];
			var new_whocard;
			new_whocard = new IDcard(ci['name'], '.' + ci['picture'], ci['age'], ci['last_checked_in']);
			$("#who-dialog").prepend(new_whocard.getDiv());
		}
		$(".idcard").click(function() {
			var clickedID = $(this).children("span.name").html();
			var clickedName = $(this).children("span.name").html();
			if(maybeChildren[clickedID]) {
				delete maybeChildren[clickedID];
				$(this).removeClass("selected");
			} else {
				maybeChildren[clickedID] = clickedName;
				$(this).addClass("selected");
			}
		});
		var idcards = $(".idcard");
	});

	$("#who-dialog").dialog({
		autoOpen : false,
		height : 575,
		width : 560,
		modal : true,
		resizable : false,
		draggable : false,
		buttons : {
			"Select All" : function() {
				$(".idcard:not(.selected)").click();
			},
			"Deselect All" : function() {
				$(".idcard.selected").click();
			},
			"OK" : function() {
				$("input[name=who]").tokenInput("clear");
				whoChildren = maybeChildren;
				maybeChildren = {};
				var whoKeys = Object.keys(whoChildren);
				for(var i = 0; i < whoKeys.length; i++) {
					$("input[name=who]").tokenInput("add", {
						id : whoKeys[i],
						name : whoChildren[whoKeys[i]]
					});
				}
				$(this).dialog("close");
			},
			Cancel : function() {
				$(this).dialog("close");
			}
		},
		open : function() {
			maybeChildren = {};
			jQuery.extend(maybeChildren, whoChildren);
		},
		close : function() {
			var undoKeys = Object.keys(maybeChildren);
			for(var i = 0; i < undoKeys.length; i++) {
				if(!whoChildren[undoKeys[i]]) {
					var id = "#" + new IDcard(undoKeys[i], null, null, null).getID();
					$(id).removeClass("selected");
				}
			}
		}
	});

	$("input[type=submit]").click(function() {
		var val = $("input[name=who]").val().split(",");
		var names_list = $("input[name=who]").val().split(",");
		if(val == "") {
			$("#error").toast("You cannot submit a story about no one!");
		} else {
			var list = val;
			console.log(list.length);
			if(list.length == 2) {
				console.log(list[length - 2]);
				list[list.length - 2] = list[list.length - 2] + " and " + list[list.length - 1];
				list.pop();
			} else if(list.length >= 3) {
				list[list.length - 2] = list[list.length - 2] + ", and " + list[list.length - 1];
				list.pop();
			}
			$.post('./utilities/log_model.php', {
				operation : 'insert_entry',
				type : 'share_story',
				'names[]' : names_list
			});

			$("#toast").toast("You just submitted a story about " + list.join(", ") + ".");
			setTimeout(function() {
				window.location.href = "./"
			}, 1500);
		}
	});

	if(window.FileReader) {
		$('#addPhotoButton').click(function(e) {
			e.preventDefault();
			$('#addPhotoFile').show();
			$('#addPhotoFile').focus();
			$('#addPhotoFile').click();
			$('#addPhotoFile').hide();
		});
	} else {
		$('#addPhotoButton').attr("disabled", "disabled");
	}
	document.getElementById('addPhotoFile').addEventListener('change', function(evt) {
		var files = evt.target.files;
		var f = files[0];
		var reader = new FileReader();
		reader.onload = (function(theFile) {
			return function(e) {
				var addedIMG = ['<img src="', e.target.result, '" title="', theFile.name, '" id="addedPhoto" />'].join('');
				var x = '<img src="./images/remove.png" id="removeX">';
				$('#addedPhotoContainer').html(addedIMG + x);
				$('#addPhotoButton').val("Change Photo");
				/*$('#addedPhotoContainer').hover(function() {
					$('#removeX').css('display', 'block');
				}, function() {
					$('#removeX').css('display', 'none');
				});*/
				$('#removeX').click(function() {
					$('#addedPhotoContainer').html('');
					$('#addPhotoButton').val("Add Photo");
					$('#addPhotoFile').val('');
				}).hover(function() {
					$('#addedPhoto').css('border-color', '#C00');
					$('#addedPhoto').css('box-shadow', '0 0 4px rgba(196, 0, 0, 1)');
				}, function() {
					$('#addedPhoto').css('border-color', '#AAA');
					$('#addedPhoto').css('box-shadow', 'none');
				});
			};
		})(f);

		reader.readAsDataURL(f);
	}, false);
});
